<template>
  <div>
    <div class="tab">
      <ul class="area">
        <li
          v-for="item in areaTab"
          :key="item.value"
          :class="area == item.value ? 'active' : ''"
          @click="changeArea(item.value)"
        >
          {{ item.type }}
        </li>
      </ul>
      <ul class="type">
        <li
          v-for="item in typeTab"
          :key="item.value"
          :class="type == item.value ? 'active' : ''"
          @click="changeType(item.value)"
        >
          {{ item.type }}
        </li>
      </ul>
    </div>
    <div class="list">
      <div
        class="listItem"
        v-for="item in singerList"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <img :src="item.img1v1Url" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getSingerAPI, getSingerDetailAPI } from "@/api";
export default {
  name: "Singer",
  data() {
    return {
      area: -1, //歌手地
      type: -1, //歌手类
      areaTab: [
        { type: "全部", value: -1 },
        { type: "华语", value: 7 },
        { type: "欧美", value: 96 },
        { type: "日本", value: 8 },
        { type: "韩国", value: 16 },
        { type: "其他", value: 0 },
      ],
      typeTab: [
        { type: "全部", value: -1 },
        { type: "男歌手", value: 1 },
        { type: "女歌手", value: 2 },
        { type: "乐队", value: 3 },
      ],
      singerList: [], //结果数组
      offset: 0, //偏移数量
      canLoad: true, //控制触底
    };
  },
  methods: {
    // 获取歌手榜
    async getSingerList() {
      const res = await getSingerAPI({
        type: this.type,
        area: this.area,
        offset: this.offset,
      });
      this.singerList = [...this.singerList, ...res.data.artists];
      this.canLoad = true;
    },
    changeType(value) {
      this.type = value;
      this.offset = 0;
      this.singerList = [];
      this.getSingerList();
    },
    changeArea(value) {
      this.area = value;
      this.offset = 0;
      this.singerList = [];
      this.getSingerList();
    },
    toDetail(id) {
      this.$router.push({
        name: "detail",
        query: {
          id,
        },
      });
    },
  },
  computed: {
    main() {
      return this.$store.state.scroll.main;
    },
  },
  mounted() {
    this.getSingerList();
    this.main.addEventListener("scroll", (e) => {
      if (this.$route.name == "singer") {
        let isLoadMore =
          e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight <
          10;
        if (isLoadMore && this.canLoad) {
          this.offset += 30;
          this.canLoad = false;
          this.getSingerList();
        }
      }
    });
  },
};
</script>
<style lang="less" scoped>
.tab {
  width: 100%;
  margin-left: 24px;
  ul {
    width: 80%;
    display: flex;
    margin-bottom: 10px;
    li {
      float: left;
      font-size: 14px;
      font-weight: lighter;
      padding: 4px 6px 4px 6px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      background-color: rgb(254, 248, 250);
      color: #ff7a9e;
      border-radius: 16px;
    }
  }
}
.list {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .listItem {
    height: 180px;
    width: 130px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    span {
      font-weight: lighter;
      font-size: 15px;
      word-break: break-all;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    img {
      width: 130px;
      height: 130px;
      border-radius: 4px;
    }
  }
}
</style>